<!-- TableDisplayHeader

  event:

    + 'update-config-data'

-->

<template>
  <div class="table-display-header">
    <el-popover
      placement="bottom"
      title="设置列"
      trigger="click"
    >
      <template slot="reference">
        <span class="column">{{ column }}</span>
      </template>
      <div class="popover-content">
        <div class="check-column">
          <el-checkbox :value="isNameColumn" @input="setNameColumn">名称</el-checkbox>
          <el-checkbox :value="numberColumnName != null" @input="toggleNumberColumn">数值</el-checkbox>
        </div>
        <div v-if="numberColumnName != null" class="input-name">
          <el-input placeholder="请输入标签" :value="numberColumnName" @input="setNumberColumnName" />
        </div>
        <div v-if="isNameColumn" class="trim">
          <el-checkbox :value="configData.nameTrim" @input="setNameTrim">trim</el-checkbox>
        </div>
      </div>
    </el-popover>

    <div class="label">
      <el-tag
        v-if="isNameColumn"
        closable
        effect="dark"
        size="medium"
        disable-transitions
        type="warning"
        @close="setNameColumn('')"
      >名称 <span class="label-trim" v-if="configData.nameTrim">trim</span></el-tag>
      <el-tag
        v-if="numberColumnName != null"
        closable
        effect="dark"
        size="medium"
        disable-transitions
        type="info"
        @close="setNumberColumnName(null)"
      >数值  <span class="column-name">{{ numberColumnName }}</span></el-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TableDisplayHeader',
  props: {
    configData: {
      type: Object,
      required: true,
    },
    column: {
      type: String,
      required: true,
    },
  },
  computed: {
    isNameColumn() {
      if (this.configData.nameColumn === this.column) {
        return true
      }
      return false
    },
    numberColumnName() {
      return this.configData.numberColumn[this.column]
    },
  },
  methods: {
    emitUpdateConfig(data) {
      this.$emit('update-config-data', data)
    },
    setNumberColumnName(name, notEmit = false) {
      const numberColumn = Object.assign({}, this.configData.numberColumn)
      numberColumn[this.column] = name
      const config = Object.assign({}, this.configData, {
        numberColumn,
      })
      // cancel name column
      if ((name != null) && this.isNameColumn) {
        Object.assign(config, {
          nameColumn: '',
        })
      }
      if (notEmit) {
        return config
      } else {
        this.emitUpdateConfig(config)
      }
    },
    setNameColumn(name) {
      if (name === true) {
        name = this.column
      } else if (name === false) {
        name = ''
      }

      let config = Object.assign({}, this.configData)
      // cancel number column
      if ((name !== '') && (this.numberColumnName != null)) {
        config = this.setNumberColumnName(null, true)
      }
      Object.assign(config, {
        nameColumn: name,
      })
      this.emitUpdateConfig(config)
    },
    toggleNumberColumn(value) {
      if (value === false) {
        this.setNumberColumnName(null)
      } else if (value === true) {
        if (this.numberColumnName == null) {
          this.setNumberColumnName('')
        }
      }
    },
    setNameTrim(value) {
      const config = Object.assign({}, this.configData, {
        nameTrim: value,
      })
      this.emitUpdateConfig(config)
    },
  },
}
</script>

<style scoped lang="scss">
.table-display-header {
  display: flex;
  align-items: center;
}

.column {
  margin-right: 1em;
  cursor: pointer;
}

.check-column {
  margin-bottom: 0.5em;
}

.input-name {
  margin-top: 0.5em;
}

.column-name {
  margin-left: 1em;
}

.trim {
  margin-top: 1em;
}

.label-trim {
  margin-left: 1em;
}
</style>
